<template>
  <div id="app">
    <wallpaper />
    <div class="app-main">
      <div class="app-header">
        <search-bar />
        <div class="toole">
          <create />
          <setting />
          <user />
        </div>
      </div>
      <div class="app-container">
        <div class="slide-item">
          <clock />
          <app-grid />
        </div>
        <!-- <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide>
            <div class="slide-item">
              <clock />
              <app-grid />
            </div>
          </swiper-slide>
          <swiper-slide>I'm Slide 2</swiper-slide>
          <swiper-slide>I'm Slide 3</swiper-slide>
          <swiper-slide>I'm Slide 4</swiper-slide>
          <swiper-slide>I'm Slide 5</swiper-slide>
          <swiper-slide>I'm Slide 6</swiper-slide>
          <swiper-slide>I'm Slide 7</swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      swiperOption: {
        clickable: true,
        preventClicksPropagation: false,
        touchStartPreventDefault: false,
        touchStartForcePreventDefault: false,
        touchMoveStopPropagation: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  }
}
</script>
<style lang="scss">
#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .app-main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    overflow: hidden;
    .app-header {
      @include flex(row, center, center);
      padding: 0 20px;
      .toole {
        @include flex(row, center, center);
        position: absolute;
        right: 20px;
        top: 0;
        height: 48px;
      }
    }
    .app-container {
      max-width: 100vw;
      height: calc(100vh - 48px);
      margin: 0 auto;
      .swiper-container {
        height: 100%;
        .swiper-pagination-bullet.swiper-pagination-bullet-active {
          background: #fff;
          opacity: 1;
        }
        .swiper-pagination-bullet {
          background: #fff;
          opacity: 0.2;
        }
      }
    }
  }
}
</style>
